<template>
    <div>
        <ly-dialog v-model="dialogVisible" :title="loadingTitle" width="750px" :before-close="handleClose">
            <div style="margin-top: 20px">
                <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
                <el-form :inline="true" :model="formInline" label-position="left">
                <el-form-item label="商品名称：">
                    <el-input v-model.trim="formInline.search" maxlength="60"  clearable placeholder="商品名称" @change="search" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <el-select v-model="formInline.category1" placeholder="请选择" filterable clearable @change="search">
                        <el-option
                                v-for="item in categoryList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                </el-form>
            </div>
            <el-table :border="true" :data="productTable" v-loading="loadingPage" @row-click="rowClick"  ref="tableref" row-key="index">
                <el-table-column width="60" type=index align="center" label="选择">
                    <template #default="scope">
                        <el-radio :label="scope.row.id"  v-model="radio" @change.native="getCurrentRow(scope.row)">{{ '' }}</el-radio>
                  </template>
                </el-table-column>
                <el-table-column width="100" prop="class" label="产品系列"show-overflow-tooltip></el-table-column>
                <el-table-column width="200" prop="name" label="元件名称"show-overflow-tooltip></el-table-column>
                <el-table-column width="200" prop="attr" label="元件规格"show-overflow-tooltip></el-table-column>
                <el-table-column width="200" prop="unit" label="单位"show-overflow-tooltip></el-table-column>
                <el-table-column width="150" prop="price" label="单价"></el-table-column>
            </el-table>
            <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
            <template #footer>
                <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
                <el-button type="primary" @click="submitData" :loading="loadingSave">确定</el-button>
            </template>
        </ly-dialog>
    </div>
</template>

<script>
    import {mallGoods,mallGoodstype} from '@/api/api'
    import LyDialog from "../../../components/dialog/dialog";
    import Pagination from "@/components/Pagination";
    export default {
        name: "addUser",
        components: {LyDialog,Pagination},
        emits: ['refreshData'],
        data() {
            return {
                dialogVisible:false,
                loadingSave:false,
                loadingTitle:'',
                isSubmit: true,
                loadingPage:false,
                checkedSelection: {}, // 单选存储数据
                radio: 0,
                data: {},
                selectrow:{},
                formInline:{
                    search:"",
                    page: 1,
                    limit: 10,
                },
                pageparm: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
                categoryList:[],
                productTable:[]
            }
        },
        methods:{
            handleClose() {
                this.dialogVisible=false
                this.loadingSave=false
            },
            addModuleFn(item,flag) {
                this.loadingTitle=flag
                this.dialogVisible=true
                this.data=item
            },
            submitData() {
                this.$emit('refreshData',this.data,this.selectrow)
                this.handleClose()
            },
            rowClick(row, column, event){
                this.radio = row.id
                this.selectrow = row 
            },
            getCurrentRow(row,index){ 
                this.radio = row.id
                this.selectrow = row 
            },
            callFather(parm) {
                this.formInline.page = parm.page
                this.formInline.limit = parm.limit
                this.getData()
            },
            search() {
                this.formInline.page = 1
                this.formInline.limit = 10
                this.getData()
            },
            getMallGoodscategoryList(){
                let param = {
                    page: 1,
                    limit: 9999,
                }
                mallGoodstype(param).then(res => {
                    if(res.code ==2000) {
                        this.categoryList = res.data.data
                    }
                })
            },
            //获取列表
            getData() {
                let that=this
                mallGoods().then(res => {
                    this.loadingPage = false
                    if(res.code ==2000) {
                        let that=this
                        this.productTable=[]
                        res.data.data.forEach(element => {
                            let mattr=[]
                            element.species.forEach(element => {
                                mattr.push(element.value+element.unit)
                            })
                            that.productTable.push({
                                id:element.id,
                                brand_id:element.brand,
                                brand_name:element.brand_name,
                                category_id:element.category_name,
                                category_name:element.category_name,
                                name:element.name,
                                unit:element.unit,
                                price:element.shop_price,
                                attr:mattr.join('/')
                            })
                        });
                        this.pageparm.page = res.data.page;
                        this.pageparm.limit = res.data.limit;
                        this.pageparm.total = res.data.total;
                    }
                })
            },
        },
        created() {
            this.getData()
            this.getMallGoodscategoryList()
        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 128px;
      height: 128px;
      line-height: 128px;
      text-align: center;
    }
    .avatar {
      width: 128px;
      height: 128px;
      display: block;
    }
</style>

